<template>
	<div class="logistics">
		<div class="corporation">
			<span>物流公司</span>
			<span class='colorGray'>顺丰快递</span>
		</div>
		<div class="corporation">
			<span>快递单号</span>
			<div class='colorGray'  @click='copy(orderNum)'>
				<span>{{orderNum}}</span>
				<image src="../../static/images/Order/tracking_copy.png" mode="widthFix"/>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const orderNum = ref('SF1003487868117')

	// 引入copy功能
	import { copy } from '../../utils/copy.ts'
</script>

<style scoped lang='scss'>
	@import '../../common.scss';

	.logistics {
		padding: $contentPadding;
		margin-top: $distance;
		background: #2A2B2D;
		border-radius: 16px;
		font-size: 24px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80px;

		.corporation {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80px;

			.colorGray {
				display: flex;
				align-items: center;
				max-width: 482px;
				color: #FFFFFF;
				text-align: right;

				image {
					width: 30px;
					margin: 0 4px;
				}
			}
		}
	}
</style>